<template>
  <div class="register">
    <div class="header">
      <div class="container">
        <span class="inbk">
          <router-link to="/index"
            ><img src="../../../assets/images/logo.png" alt=""
          /></router-link>
        </span>
      </div>
    </div>
    <div class="box">
      <div class="container">
        <div class="tab">
          <el-radio v-model="radio" label="1" class="mr-20">{{
            $t("common.login.cUser")
          }}</el-radio>
          <el-radio v-model="radio" label="2" class="ml-20">{{
            $t("common.login.pUser")
          }}</el-radio>
        </div>
        <div class="tab-box" v-if="radio == 1">
          <!-- 企业名称 -->
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span
              >{{ $t("common.company.companyName") }}
            </div>
            <div class="box-input">
              <input
                type="text"
                name="password"
                :placeholder="
                  this.$t('common.form.input', [
                    $t('common.company.companyName'),
                  ])
                "
                v-model="businessVo.enterpriseName"
                maxlength="16"
              />
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span
              >{{ $t("common.company.companyCode") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                name="password"
                :placeholder="
                  this.$t('common.form.input', [
                    $t('common.company.companyCode'),
                  ])
                "
                v-model="businessVo.uscc"
                maxlength="18"
                @input="jsUscc"
              />
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span
              >{{ $t("common.company.companyNature") }}
            </div>
            <div class="box-input">
              <select v-model="businessVo.corporateType">
                <option value="">{{ $t("common.login.selectNature") }}</option>
                <option
                  :key="index"
                  v-for="(item, index) in corporateTypeList"
                  :value="item.value"
                  >{{ item.text }}</option
                >
              </select>
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span>{{ $t("common.login.bindPhone") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                maxlength="11"
                name="password"
                :placeholder="
                  this.$t('common.form.input', [$t('common.login.bindPhone')])
                "
                v-model="businessVo.bindPhone"
                @blur="checkName()"
                @input="checkName()"
              />
            </div>
            <div class="box-des">
              <span class="blue_color" v-if="checkStatus == 1">{{
                $t("common.login.enterTrue")
              }}</span>
              <span class="red_color" v-if="checkStatus == 0">{{
                $t("common.login.phoneEd")
              }}</span>
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span
              >{{ $t("common.login.loginPassword") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                name="password"
                :placeholder="this.$t('common.login.passwordTip')"
                v-model="businessVo.password"
                maxlength="16"
              />
            </div>
            <div class="box-des">{{ $t("common.company.companytask6") }}</div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span>{{ $t("common.login.code") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                width="244"
                name="password"
                :placeholder="this.$t('common.login.enterCode')"
                class="captcha-input"
                v-model="businessVo.code"
              />
              <button
                type="button"
                width="122"
                class="captcha-btn"
                @click="sendCode"
                v-if="isSendCode"
              >
                {{ $t("common.login.getCode") }}
              </button>
              <button
                type="button"
                width="122"
                class="captcha-btn"
                v-if="!isSendCode"
              >
                {{ sendMessage }} s
              </button>
            </div>
          </div>

          <div class="tab-box_item mt-40">
            <div class="box-name"></div>
            <div class="box-input">
              <el-checkbox v-model="checked"
                >{{ $t("common.login.readAndagree") }}
                <router-link to="/detail?type=2" target="_blank">{{
                  $t("common.login.authorizationAgreement")
                }}</router-link></el-checkbox
              >
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name"></div>
            <div class="box-input">
              <button type="button" @click="toRegister">
                {{ $t("common.login.register") }}
              </button>
            </div>
          </div>
        </div>

        <div class="tab-box" v-if="radio == 2">
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span>{{ $t("common.login.userXName") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                name="loginName"
                :placeholder="
                  this.$t('common.form.input', [$t('common.login.userXName')])
                "
                v-model="businessVo.loginName"
                @blur="checkName()"
                @input="checkName()"
              />
            </div>
            <!-- <div class="box-des">
                    <span class="blue_color" v-if="checkStatus==1">{{$t('common.login.enterTrue')}}</span>
                    <span class="red_color" v-if="checkStatus==0">{{$t('common.login.userNameEd')}}</span>
                 </div> -->
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span
              >{{ $t("common.detail.natureIdentity") }}
            </div>
            <div class="box-input">
              <select v-model="businessVo.identityProperties">
                <option value="">{{
                  $t("common.detail.natureIdentity")
                }}</option>
                <option
                  v-for="item in identityPropertiesList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.text }}</option
                >
              </select>
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span>{{ $t("common.login.bindPhone") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                maxlength="11"
                name="bindPhone"
                :placeholder="
                  this.$t('common.form.input', [$t('common.login.bindPhone')])
                "
                v-model="businessVo.bindPhone"
                @blur="checkName()"
                @input="checkName()"
              />
            </div>
            <div class="box-des">
              <span class="blue_color" v-if="checkStatus == 1">{{
                $t("common.login.enterTrue")
              }}</span>
              <span class="red_color" v-if="checkStatus == 0">{{
                $t("common.login.phoneEd")
              }}</span>
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span
              >{{ $t("common.login.loginPassword") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                name="password"
                :placeholder="this.$t('common.login.enterLoginPaasord')"
                v-model="businessVo.password"
                maxlength="16"
              />
            </div>
            <div class="box-des">
              {{ $t("common.company.companytask6") }}
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name">
              <span class="require">*</span>{{ $t("common.login.code") }}
            </div>
            <div class="box-input">
              <input
                type="passsword"
                width="244"
                name="code"
                :placeholder="this.$t('common.login.enterCode')"
                class="captcha-input"
                v-model="businessVo.code"
              />
              <button
                type="button"
                width="122"
                class="captcha-btn"
                @click="sendCode"
                v-if="isSendCode"
              >
                {{ $t("common.login.getCode") }}
              </button>
              <button
                type="button"
                width="122"
                class="captcha-btn"
                v-if="!isSendCode"
              >
                {{ sendMessage }} s
              </button>
            </div>
          </div>

          <div class="tab-box_item mt-40">
            <div class="box-name"></div>
            <div class="box-input">
              <el-checkbox v-model="checked"
                >{{ $t("common.login.readAndagree") }}
                <router-link to="/detail?type=2" target="_blank">{{
                  $t("common.login.authorizationAgreement")
                }}</router-link></el-checkbox
              >
            </div>
          </div>
          <div class="tab-box_item">
            <div class="box-name"></div>
            <div class="box-input">
              <button type="button" @click="toRegister">
                {{ $t("common.login.register") }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer getFoot">
      <div class="container">
        <p>
          {{ $t("common.foot.copy") }}
          <img src="../../../assets/images/public/icp.png" width="20" height="20" alt="" />
          {{ $t("common.foot.copy1") }}110010000000000
        </p>
      </div>
    </div>

    <div id="zc_pup" class="clearfix flex-ct" v-if="pup">
      <div class="pup-box bgff rd3">
        <img src="../../../assets/images/ok.png" alt="" />
        <h3 class="font1">恭喜您，注册成功</h3>
        <div class="np">
          <template v-if="radio == 1">尊敬的企业用户，当前还是未认证状态，完成<br />企业认证可以获得更多功能权力哦！</template>
          <template v-else>崖州湾科技城人才服务中心欢迎您，请完善<br />您的个人信息，获得更多优质服务哦！</template>
        </div>
        <div class="btnBox flex-ct">
          <router-link to="/index" class="btn cur flex-ct" >等等再说</router-link>
          <span class="btn btn2 bg1 cur flex-ct" @click="goInfo(radio)">完善信息</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ajax, showToast, showToastSuccess, reg, ajaxAdd,getUserInfoData } from "@/utils/js.js";
import {
  checkName,
  corporateTypeList,
  registerUser,
  registerBusiness,
  getCode,
  login,
  getCurrentInfo,
} from "@/services/api.js";

// const log = console.log
export default {
  data() {
    return {
      isSendCode: true,
      sendMessage: "60",
      radio: "1",
      checked: true,
      checkStatus: 2,
      corporateTypeList: [],
      identityPropertiesList: [],
      businessVo: {
        bindPhone: "",
        phone: "",
        code: "",
        corporateType: "",
        enterpriseName: "",
        logoId: "",
        password: "",
        identityProperties: "",
        loginName: "",
        uscc: "",
      },
      pup: false,
    };
  },
  mounted() {
    this.content();
  },
  computed: {},
  directives: {},
  watch: {},
  methods: {
    jsUscc(e) {
      console.log(e);
      let val = this.businessVo.uscc;
      this.businessVo.uscc = val.replace(/[^a-z0-9]/gi, "");
    },
    goInfo(e) {
      let url;
      console.log("goInfo", e);
      e == 1 ? (url = "/vip/c_authen?type=0") : (url = "/vip/p_resume_edit");
      this.$router.push(url);
    },
    content() {
      // 企业性质 corporateType
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "corporateType",
        },
        (res) => {
          this.corporateTypeList = res.data;
        },
        (err) => {
          //showToast(this,err.msg)
        }
      );
      // 身份性质 IDENTITY_PROPERTIES
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "IDENTITY_PROPERTIES",
        },
        (res) => {
          this.identityPropertiesList = res.data;
        },
        (err) => {
          //showToast(this,err.msg)
        }
      );
    },
    checkName() {
      let phone = this.businessVo.bindPhone;
      console.log(this.businessVo.bindPhone, reg.phone1.test(phone));
      if (reg.phone1.test(phone)) {
        //检测是否存在
        ajax(
          this,
          checkName,
          {
            loginName: this.businessVo.loginName,
            phone: this.businessVo.bindPhone,
          },
          (res) => {
            // false=>存在，true=>不存在
            if (res.data) {
              this.checkStatus = 1;
            } else {
              this.checkStatus = 0;
            }
          },
          (err) => {
            //showToast(this,err.msg)
          }
        );
      } else {
        this.checkStatus = 2;
      }
    },
    toRegister() {
      let businessVo = this.businessVo;
      let radio = this.radio;
      this.businessVo.phone = this.businessVo.bindPhone;
      if (businessVo.enterpriseName.length == 0 && radio == 1) return showToast(this,this.$t("common.form.input", [this.$t("common.company.companyName")])); //请输入企业名称
      if (businessVo.loginName.length == 0 && radio == 2) return showToast(this,this.$t("common.form.input", [this.$t("common.login.userXName")])); //请输入企业名称
      if (businessVo.uscc.length == 0 && radio == 1) return showToast(this,this.$t("common.form.input", [this.$t("common.company.companyCode")])); //请输入企业编码
      if (businessVo.corporateType.length == 0 && radio == 1) return showToast(this, this.$t("common.login.selectNature")); //请选择企业性质
      if (businessVo.identityProperties.length == 0 && radio == 2) return showToast(this, this.$t("common.resume.selectNature")); //请选择身份性质
      if (businessVo.bindPhone.length == 0) return showToast( this, this.$t("common.form.input", [this.$t("common.login.bindPhone")]) ); //请输入绑定手机号
      if (!reg.phone1.test(businessVo.bindPhone)) return showToast(this, this.$t("common.login.jyPhone")); //手机号输入格式不正确
      if (this.checkStatus == 0) return showToast(this, this.$t("common.login.phoneEd")); //手机号已存在
      if (!reg.password.test(this.businessVo.password)) return showToast(this, this.$t("common.tips.gsPassword")); //密码输入格式不正确
      if (!this.checked) return showToast(this, this.$t("common.tips.read")); //您未阅读并同意《用户授权协议》
      if (businessVo.code.length == 0) return showToast(this, this.$t("common.login.enterCode")); //请输入验证码

      let url = "";
      radio == 1 ? (url = registerBusiness) : (url = registerUser);
      ajax(
        this,
        url,
        businessVo,
        (res) => {
          this.login();
        },
        (err) => {
          
        }
      );
    },
    login() {
      let user = {
        code: "",
        identityProperties: "",
        loginName: this.businessVo.bindPhone,
        password: this.businessVo.password,
        phone: this.businessVo.bindPhone,
      };
      ajaxAdd(
        this,
        login,
        user,
        (res) => {
          this.$store.dispatch("setToken", res.data);
          getUserInfoData(this,userInfo=>{
            console.log('新的用户',userInfo)
            this.userInfo = userInfo
            this.$store.dispatch("setUserInfo", userInfo);
            this.pup = true;
          })
        },
        (d) => {}
      );
    },
    sendCode() {
      const TIME_COUNT = 60;
      let businessVo = this.businessVo;
      let radio = this.radio;
      this.businessVo.phone = this.businessVo.bindPhone;
      if (businessVo.enterpriseName.length == 0 && radio == 1) return showToast(this,this.$t("common.form.input", [this.$t("common.company.companyName")])); //请输入企业名称
      if (businessVo.loginName.length == 0 && radio == 2) return showToast(this,this.$t("common.form.input", [this.$t("common.login.userXName")])); //请输入企业名称
      if (businessVo.uscc.length == 0 && radio == 1) return showToast(this,this.$t("common.form.input", [this.$t("common.company.companyCode")])); //请输入企业编码
      if (businessVo.corporateType.length == 0 && radio == 1) return showToast(this, this.$t("common.login.selectNature")); //请选择企业性质
      if (businessVo.identityProperties.length == 0 && radio == 2) return showToast(this, this.$t("common.resume.selectNature")); //请选择身份性质
      if (businessVo.bindPhone.length == 0) return showToast( this, this.$t("common.form.input", [this.$t("common.login.bindPhone")]) ); //请输入绑定手机号
      if (!reg.phone1.test(businessVo.bindPhone)) return showToast(this, this.$t("common.login.jyPhone")); //手机号输入格式不正确
      if (this.checkStatus == 0) return showToast(this, this.$t("common.login.phoneEd")); //手机号已存在
      if (!reg.password.test(this.businessVo.password)) return showToast(this, this.$t("common.tips.gsPassword")); //密码输入格式不正确
      // // debugger
      // if (!reg.phone1.test(this.businessVo.bindPhone)) {
      //   showToast(this, this.$t("common.login.phoneErr"));
      //   return false;
      // }
      if (!this.timer) {
        // 企业性质 corporateType
        ajax(
          this,
          getCode,
          {
            phone: this.businessVo.bindPhone,
            type: "Register",
          },
          (res) => {
            showToastSuccess(this, this.$t("common.login.getCodeOk"));
          },
          (err) => {
            //showToast(this,err.msg)
          }
        );
        this.sendMessage = TIME_COUNT;
        this.isSendCode = false;
        this.timer = setInterval(() => {
          if (this.sendMessage > 0 && this.sendMessage <= TIME_COUNT) {
            this.sendMessage--;
          } else {
            this.isSendCode = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
  },
};
</script>
<style lang="scss">
#zc_pup {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  image {
    display: block;
    margin: 0 auto 16px;
  }
  .np {
    margin: 22px auto 34px;
  }
  .pup-box {
    width: 382px;
    box-sizing: border-box;
    padding: 34px 15px;
    text-align: center;
  }
  .btn {
    width: 120px;
    height: 40px;
    border: 1px solid rgba(15, 84, 188, 1);
    color: #0f54bc;
  }
  .btn2 {
    background-color: #0f54bc;
    color: #fff;
    margin-left: 14px;
  }
}
.register {
  .blue_color {
    color: #0f54bc;
  }
  .red_color {
    color: red;
  }
  * {
    margin: 0;
    padding: 0;
  }
  .header {
    width: 100%;
    height: 82px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
  }
  .require {
    color: red;
  }
  .container {
    width: 1200px;
    height: 82px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .header > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .inbk {
    display: inline-block;
    vertical-align: middle;
  }
  .box {
    position: relative;
    box-sizing: border-box;
    width: 1200px;
    height: 665px;
    background: #fff;
    margin: 10px auto 0 auto;
  }
  .tab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    line-height: 31px;
    color: rgba(51, 51, 51, 1);
    opacity: 1;
    padding-top: 78px;
    padding-bottom: 20px;
  }
  .mr-20 {
    margin-right: 20px;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .tab-box {
    margin-left: 300px;
  }
  .tab-box_item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 15px;
    align-items: center;
  }

  .box-name {
    width: 130px;
    text-align: right;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    line-height: 40px;
    color: rgba(102, 102, 102, 1);
    -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
    text-stroke: 1 rgba(0, 0, 0, 0);
    opacity: 1;
  }
  .tab .el-radio__label {
    margin-left: 5px;
  }
  .box-input .el-checkbox__label {
    margin-left: 5px;
  }
  .box-input input,
  .box-input select {
    margin-left: 5px;
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 365px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(230, 226, 226, 1);
    opacity: 1;
    border-radius: 2px;
  }
  .captcha-input {
    float: left;
    width: 244px !important;
    box-sizing: border-box;
  }
  .captcha-btn {
    margin-left: 8px;
    float: right;
    width: 112px !important;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 40px;
    color: rgba(15, 84, 188, 1) !important;
    -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
    text-stroke: 1 rgba(0, 0, 0, 0);
    opacity: 1;
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(15, 84, 188, 1) !important;
    border-radius: 2px !important;
  }
  .box-input a {
    color: #0f54bc;
  }
  .box-input button {
    width: 365px;
    height: 40px;
    background: rgba(15, 84, 188, 1);
    opacity: 1;
    border-radius: 2px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 40px;
    color: rgba(255, 255, 255, 1);
    -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
    text-stroke: 1 rgba(0, 0, 0, 0);
    border: none;
    outline: none;
  }
  .mt-40 {
    margin-top: 40px;
  }
  .box-des {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 16px;
    color: rgba(204, 204, 204, 1);
    -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
    text-stroke: 1 rgba(0, 0, 0, 0);
    opacity: 1;
    margin-left: 5px;
  }
  .footer {
    text-align: center;
    width: 100%;
    height: 84px;
    line-height: 84px;
    // border-top:1px dashed #000;
    // margin-top: 100px;
    font-size: 12px;
    // background:rgba(255,255,255,1);
    opacity: 1;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 16px;
  }
  .footer p {
    line-height: 84px;
  }
  .footer p img {
    margin: 0px 5px;
    position: relative;
    top: 5px;
  }
}
</style>
